<template>
    <el-row class="wrap">
        <el-row class="top">
            <el-row class="topInner">
                <el-col 
                    class="topInnerItem" 
                    v-for="(item,index) in Bottom.topInnerItems"
                    :key="index">
                    <p class="title">{{item.title}}</p>
                    <p
                        @click="link(el)"
                        class="item" 
                        :key="idx"
                        v-for="(el,idx) in item.list">
                        {{el[0]}}
                    </p>
                </el-col>
                <el-col
                    class="topInnerItem">
                    <p>关注微信</p>
                    <img :src="require(`@/assets/img/home/qrcode.jpg`)" alt="wechat">
                </el-col>
            </el-row>
            <img :src="require('@/assets/img/home/logodown@2x.png')" alt="contact" class="contact">
        </el-row>
        <el-row class="bottom">
            <el-row type="flex" class="bottomInner">
                <el-col class="left">{{Bottom.icp}}</el-col>
                <el-col class="right">{{Bottom.tel}}</el-col>
            </el-row>
        </el-row>
    </el-row>
</template>

<script>
    export default {
        data(){
            return {
            }
        },
        computed:{
            Bottom(){
                return this.$t("bottom");
            }
        },
        methods:{
            link(el){
                const url = el[1];
                if(url) this.$router.replace(url)
            }
        }
    }
</script>

<style lang="less" scoped>
    .wrap {
        height: 440px;
        background-color: #1B75BD;
        color: #fff;
        .top {
            height: 390px;
            border-bottom: 1px solid rgba(255,255,255,.1);
            padding: 46px 0;
            position: relative;
            margin: 0 auto;
            max-width: 1280px;
            .topInner {
                display: flex;
                justify-content: flex-start;
                .topInnerItem {
                    flex: 1;
                    text-align: left;
                    img {
                        width: 98px;
                        height: 98px;
                        margin-top: 30px;
                    }
                    .title {
                        font-size:14px;
                        font-weight:400;
                        color:rgba(255,255,255,1);
                        line-height:1;
                        margin-bottom: 40px;
                    }
                    .item {
                        font-size:12px;
                        font-weight:400;
                        color:rgba(255,255,255,.5);
                        line-height:1;
                        margin-bottom: 16px;
                        cursor: pointer;
                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }
            }
            .contact {
                position: absolute;
                width: 579px;
                height: 88px;
                right: 0;
                bottom: 86px;
            }
        }
        .bottom {
            height: 48px;
            .bottomInner {
                max-width: 1280px;
                height: 100%;
                margin: 0 auto;
                align-items: center;
                .left {
                    text-align: left;
                    font-size:12px;
                    font-weight:400;
                    color:rgba(255,255,255,1);
                    line-height:24px;
                }
                .right {
                    font-size:12px;
                    font-weight:400;
                    color:rgba(255,255,255,1);
                    line-height:24px;
                    text-align: right;
                }
            }
        }
    }
</style>